<script>
import expressForm from '@/components/DmbForm'
import LTable from '@/components/LTable/index.vue'
import { formBase, tableBase, formItemStyle, cellStyle, headerCellStyle, tableFormStyle } from './config'

const defaultForm = {}
export default {
  name: 'warehoused',
  computed: {
    tableFormStyle() {
      return tableFormStyle
    },
    // 表头单元格样式
    headerCellStyle() {
      return headerCellStyle
    },
    // 单元格样式
    cellStyle() {
      return cellStyle
    },
    // 单个表单样式
    formItemStyle() {
      return formItemStyle
    }
  },
  components: { LTable, expressForm },
  data() {
    return {
      requestConfig: {
        url: '/base/manage/hasPut/selectHasPutList',
        method: 'post',
        montage: false
      },
      setRequest: {
        url: '/base/manage/hasPut/updateProductInfo',
        method: 'put',
        montage: false
      },
      propsSearchForm: { ...defaultForm },
      form_config: formBase,
      selectionArr: []
    }
  },
  watch: {
    'propsSearchForm.Time': {
      handler(value) {
        this.propsSearchForm.startTime = value[0]
        this.propsSearchForm.endTime = value[1]
      }
    }
  },
  methods: {
    // 返回表格基础类型
    tableBase() {
      return tableBase
    },
    // 表单选项配置
    formBase() {
      return formBase
    },
    // 导出
    downLoad() {
      if (this.selectionArr.length > 0) {
        const data = this.selectionArr.map(item => {
          return item.id
        })
        console.log(data)
        this.download('/base/manage/hasPut/export', { ids: data }, `warehoused_${new Date().getTime()}.xlsx`)
      } else {
        this.$message.error('请选择数据导出')
      }
    }
  }
}
</script>

<template>
  <div>
    <div class="my-3">
      <express-form
        :model-value="propsSearchForm"
        :form-items="formBase()"
        :item-style="formItemStyle"
        labelWidth="75px"
        @update="(row) => propsSearchForm = Object.assign({}, propsSearchForm, row)"
      >
        <template v-slot:footer="row" class="flex flex-row-reverse">
          <div class="mb-3 flex flex-row-reverse">
            <div>
              <el-button type="primary" @click="downLoad">导出</el-button>
              <el-button type="success" @click="$refs.table.getListData()">查询</el-button>
            </div>
          </div>
        </template>
      </express-form>
    </div>
    <l-table
      ref="table"
      :prop-list="tableBase()"
      :is-operate="true"
      :props-search-form="propsSearchForm"
      :req-request="requestConfig"
      :set-request="setRequest"
      select-key="id"
      findType="findPage"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
      :initialize="false"
      :change-search-form="false"
      :show-footer="true"
      :form-item-style="tableFormStyle"
      @selectionChange="(row) => { selectionArr = row }"
    >
      <template v-slot:isDown="{ row }">
        {{ row.isDown === 0 ? '未下架' : '已下架' }}
      </template>
      <template v-slot:isJettisons="row">
        {{ row.isJettisons === 0 ? '未下架' : '已下架' }}
      </template>
      <template v-slot:isPreorder="row">
        {{ row.isPreorder === 0 ? '未预报' : '已预报'}}
      </template>
    </l-table>
  </div>
</template>

<style scoped lang="scss">
.el-select .el-input {
  width: 130px;
}
</style>
